<!--
 * @Author: your name
 * @Date: 2022-05-01 19:43:50
 * @LastEditTime: 2022-05-06 09:03:44
 * @LastEditors: jjjjwei 1506865174@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \二阶段项目\gitcode\html\gongzuotai.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/font/iconfont.woff">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #show {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #content1 {
      width: 100%;
      overflow: hidden;
    }

    #content1>div {
      width: 22.5%;
      padding: 20px 10px;
      box-sizing: border-box;
      float: left;
      color: white;
      font-size: 24px;
      overflow: hidden;
    }

    #content1>div:nth-child(1) {
      margin-right: 3.333%;
      background-color: rgb(23, 213, 126);
    }

    #content1>div:nth-child(2) {
      margin-right: 3.333%;
      background-color: rgb(254, 201, 43);
    }

    #content1>div:nth-child(3) {
      margin-right: 3.333%;
      background-color: rgb(45, 163, 251);
    }

    #content1>div:nth-child(4) {
      background-color: rgb(193, 114, 216);
    }

    #content1>div>span:nth-of-type(1) {
      margin-right: 70%;
    }

    #content1>div>p {
      float: right;
      font-size: 16px;
    }

    #content2 {
      width: 100%;
      overflow: hidden;
      margin-top: 20px;
    }

    li {
      list-style: none;
    }

    #content2 .left {
      width: 48.333%;
      float: left;
    }

    #content2 .left>div {
      background-color: white;
    }

    #content2 .left>div>div {
      width: 100%;
      padding: 20px 10px;
      border-bottom: 2px solid rgb(240, 244, 246);
      box-sizing: border-box;
    }

    #content2 .left>div>ul {
      width: 100%;
      padding: 40px 10px;
      background-color: white;
      box-sizing: border-box;
      overflow: hidden;
    }

    #content2 .left>div>ul li {
      float: left;
      text-align: center;
      width: 20%;
    }

    #content2 .left>div>ul li span {
      font-size: 20px;
    }

    #content2 .left>div:nth-child(2) {
      margin-top: 20px;
    }

    #content2 .left>div:nth-child(2) ul li div {
      padding: 15px 10px;
      width: 30%;
      margin: 0 auto;
      border-radius: 5px;
    }

    #content2 .right {
      width: 48.333%;
      float: right;
    }

    #content2 .right>div {
      width: 100%;
      padding: 20px 10px;
      border-bottom: 2px solid rgb(206, 209, 209);
      box-sizing: border-box;
      background-color: white;
    }

    #content2 .right table {
      width: 100%;
      text-align: left;
    }

    #content2 .right table th {
      padding: 20px 0.5%;
      color: rgb(137, 187, 222);
    }

    #content2 .right table td {
      padding: 15px 1%;
      border-bottom: 1px solid rgb(206, 209, 209);
    }

    #content3 {
      width: 100%;
      margin-top: 20px;
    }

    #content3>div:first-child {
      width: 100%;
      padding: 20px 10px;
      border-bottom: 2px solid rgb(240, 244, 246);
      box-sizing: border-box;
      background-color: white;
    }

    #content3>div:last-child {
      width: 100%;
    }

    #content3>div:last-child img {
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="show">
    <div id="tubiaofont">
      <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>工作台</span>
    </div>
    <div id="content1">
      <div>
        <span><i class="layui-icon layui-icon-rmb" style=" font-size: 24px;"></i></span>
        <span>0</span>
        <p>今日销售额</p>
      </div>
      <div>
        <span><i class="layui-icon layui-icon-list" style=" font-size: 24px;"></i></span>
        <span>0</span>
        <p>今日订单数</p>
      </div>
      <div>
        <span><i class="layui-icon layui-icon-cart" style="font-size: 24px;"></i></span>
        <span>0</span>
        <p>出售商品数</p>
      </div>
      <div>
        <span><i class="layui-icon layui-icon-username" style="font-size: 24px;"></i></span>
        <span id="vip">0</span>
        <p>总会员数</p>
      </div>
    </div>
    <div id="content2">
      <div class="left">
        <div>
          <div>
            <p style="font-size: 16px;">待处理</p>
          </div>
          <ul>
            <li>
              <div><img src="../img/u7411.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">待发货</p><span>1023</span>
            </li>
            <li>
              <div><img src="../img/u7407.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">待付款</p><span>1023</span>
            </li>
            <li>
              <div><img src="../img/u7415.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">退货/退款</p><span>13</span>
            </li>
            <li>
              <div><img src="../img/u7425.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">退货/退款</p><span>1</span>
            </li>
            <li>
              <div><img src="../img/u7419.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">咨询</p><span>103</span>
            </li>
          </ul>
        </div>
        <div>
          <div>
            <p style="font-size: 16px;">常用菜单</p>
          </div>
          <ul>
            <li>
              <div style="background-color: rgb(255,190,96);"><img src="../img/u7394.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">商品发布</p>
            </li>
            <li>
              <div style="background-color: rgb(71,215,232);"><img src="../img/u7435.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">首页轮播图</p>
            </li>
            <li>
              <div style="background-color: rgb(85,222,159);"><img src="../img/u7438.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">优惠券</p>
            </li>
            <li>
              <div style="background-color: rgb(251,153,204);"><img src="../img/u7441.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">在线客服</p>
            </li>
            <li>
              <div style="background-color: rgb(135,192,234);"><img src="../img/u7445.png" alt=""></div>
              <p style="margin: 10px 0;color: gray;">文章发布</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <div>
          <p style="font-size: 16px;">热销商品</p>
        </div>
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>分类</th>
              <th>销量</th>
            </tr>
          </thead>
          <tbody style="background-color: white;">
            <tr>
              <td>恋爱女王节妈咪版系列复古的灵感挑战你的高腰牛仔裤</td>
              <td>女装</td>
              <td>3</td>
            </tr>
            <tr>
              <td>【低价疯抢】Apple iPhone 6 32G</td>
              <td>三星</td>
              <td>1</td>
            </tr>
            <tr>
              <td>Apple iPad Air 2 平板电脑</td>
              <td>平板电脑</td>
              <td>2</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div id="content3">
      <div>
        <p style="font-size: 16px;">销售额统计</p>
      </div>
      <div><img src="../img/u7480.png" alt=""></div>
    </div>
  </div>
  <script src="../js/jQuery.3.6.0-uncompress.js"></script>
  <script src="../js/database.js"></script>
  <script src="../js/user.js"></script>
</body>

</html>